<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-aside width="220px" style="background-color: rgb(238, 241, 246);height: 100%;overflow: visible">
        <el-menu  v-for="item in menuList" :key="item.id" mode="vertical" :router="menuList.id==100">
          <el-submenu :index="item.lxOrder+''">
            <template slot="title"><i :class="item.lxIcon"></i>{{item.lxMenuName}}</template>
            <el-menu-item-group v-for="(itemChildren,index) in item.childMenu":key="index">
              <el-menu-item :index="itemChildren.lxOrder"><i :class="itemChildren.lxIcon"></i>
                <router-link :to="{path:itemChildren.lxLink}">{{ itemChildren.lxMenuName }}</router-link>
              </el-menu-item>

            </el-menu-item-group>


          </el-submenu>




        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
<!--          此处显示内嵌页面-->
<!--          <el-table :data="tableData">-->
<!--            <el-table-column prop="date" label="日期" width="140">-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="name" label="姓名" width="120">-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="address" label="地址">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

  </div>



</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item),
      menuList:{
        id:'',
        lxMenuName:'',
        lxOrder:"",
        lxFather:'',
        lxIcon:'',
        lxLink:'',
        childMenu:[{
          id:'',
          lxMenuName:'',
          lxOrder:"",
          lxFather:'',
          lxIcon:'',
          lxLink:'',
        }],
      },
    }
  },
  mounted() {
    var lxUserId=sessionStorage.getItem("LoginName");
    this.$http.post('/menu/queryMenuByUser',lxUserId).then(res=>{
      this.menuList=res.data.data;
      console.log("res",res)
      console.log("this.roleList",this.menuList)
    });

    // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
    // window.onbeforeunload = function (e) {
    //   var storage = window.localStorage;
    //   storage.clear()
    // }
  },
};
</script>
